<template>
  <div class="overtrue">
    <img src="../../../public/logo.jpg" class="logo" />
    <el-card class="card">
      <div class="card-title">{{ title }}</div>
      <el-divider />
      <el-form :model="form" class="dark">
        <el-form-item label="账号">
          <el-input v-model="form.name" placeholder="请输入帐号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item v-show="cardType === 2" label="确认密码">
          <el-input v-model="form.rePassword" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
      </el-form>
      <div class="button-box">
        <el-button v-if="cardType === 1" class="button" type="primary" @click="Determine">确定</el-button>
        <el-button v-else class="button" type="info" @click="DetermineRegister">返回</el-button>
        <el-button v-if="cardType === 1" class="button" type="info" @click="Register">注册</el-button>
        <el-button v-else class="button" type="primary" @click="Cancellation">确定</el-button>
      </div>
      <el-button v-show="cardType === 1" class="button1" @click="OtherLogin">其他登陆方式</el-button>
    </el-card>
    <div class="mask"></div>
    <el-card class="otherlogin-card">
      <div class="arrow-down" @click="OffOther"></div>
      <img src="../../../public/logo.jpg" class="logo1" />
      <div class="other-text">
        <h2>登陆之后,</h2>
        <h2>即刻体验TODO</h2>
      </div>
      <div class="button2-box">
        <el-button class="button2" @click="Login">使用微信登陆</el-button>
        <el-button class="button2" @click="Login">使用支付宝登陆</el-button>
        <el-button class="button2" @click="Login">使用AppleID登陆</el-button>
      </div>
      <div class="buttom-text">用户隐私与服务协议</div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(() => {
  document.querySelector('.card').classList.add('card-moveup');
  document.querySelector('.logo').style.opacity = '1';
});

let cardType = ref(1);
let form = reactive({ name: 'hong', password: '88888888', rePassword: '88888888' });
let title = ref('登 陆');

function Determine() {
  Login();
}

function Register() {
  console.log('注册');
  title.value = '注册';
  cardType.value = 2;
}

function DetermineRegister() {
  console.log('确定注册');
  cardType.value = 1;
  title.value = '登陆';
}

function Cancellation() {
  console.log('返回');
  cardType.value = 1;
  title.value = '登陆';
}

function OtherLogin() {
  console.log('其他登陆方式');
  document.querySelector('.otherlogin-card').classList.add('otherlogin-card-moveup');
  setTimeout(function () {
    document.querySelector('.mask').style.display = 'block';
  }, 10);
}

function Login() {
  console.log('登陆');
  router.push('/index');
}

function OffOther() {
  document.querySelector('.mask').style.display = 'none';
  document.querySelector('.otherlogin-card').classList.add('otherlogin-card-movedown');
  setTimeout(function () {
    document.querySelector('.otherlogin-card').classList.remove('otherlogin-card-moveup');
    document.querySelector('.otherlogin-card').classList.remove('otherlogin-card-movedown');
  }, 1000);
}
</script>

<style scoped>
.overtrue {
  height: 100%;
  aspect-ratio: 375/812;
  display: flex;
  justify-content: center;
  position: relative;
  background-image: url('../../../public/b.png');
  background-size: cover;
}
.logo {
  margin-top: 30%;
  height: 15%;
  aspect-ratio: 1;
  opacity: 0;
  transition: opacity 1s ease; /* 添加过渡效果 */
  border-radius: 16px;
}
.logo1 {
  position: absolute;
  width: 31%;
  aspect-ratio: 1;
  background-color: antiquewhite;
  border: 1px solid rgb(160, 160, 173);
  top: 21%;
  left: 50%; /* 设置 left 为 50% */
  transform: translateX(-50%); /* 使用 transform 属性向左平移自身宽度的一半 */
  box-shadow:
    12px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}
.card {
  position: absolute;
  width: 85%;
  height: 40%;
  display: flex;
  justify-content: center;
  transform: translateY(100%);
  opacity: 0; /* 初始时设置透明度为0，即元素不可见 */
  transition:
    transform 1s ease,
    opacity 1s ease; /* 添加过渡效果 */
}
.card-moveup {
  transform: translateY(80%);
  opacity: 1;
}
.card-title {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
}
.button-box {
  width: 100%;
}
.button {
  width: 46.5%;
}
.button1 {
  margin-top: 7%;
  width: 100%;
}
.otherlogin-card {
  position: absolute;
  width: 100%;
  height: 90.27027%;
  transform: translateY(100%);
  border-radius: 3% 3% 0 0;
  transition: transform 1s ease opacity 1s ease;
  box-shadow: 0px -2px 20px rgba(0, 0, 0, 0.2); /* 添加顶部阴影效果 */
  opacity: 0;
}
.button2-box {
  width: 100%;
  display: flex;
  flex-direction: column; /* 竖直排列 */
  justify-content: center; /* 竖直居中 */
  align-items: center; /* 水平居中 */
  margin-top: 140%;
}
.button2 {
  width: 90%;
  border-radius: 20px; /* 设置圆角的半径，可以根据需求调整 */
  margin: 2%;
}
.buttom-text {
  width: 100%;
  cursor: pointer;
  font-size: 0.8rem;
  text-align: center;
  margin-top: 7%;
  text-decoration: underline; /* 添加下划线 */
  color: rgb(194, 194, 194);
}
.otherlogin-card-moveup {
  transform: translateY(0%);
  bottom: 0;
  opacity: 1;
}
.otherlogin-card-movedown {
  transform: translateY(100%);
  opacity: 0;
}
.arrow-down {
  margin: auto;
  width: 0;
  height: 0;
  border-left: 20px solid transparent; /* 左边透明 */
  border-right: 20px solid transparent; /* 右边透明 */
  border-top: 10px solid rgb(238, 238, 238); /* 上边为黑色实心 */
  cursor: pointer;
}
.other-text {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  top: 40%;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}
@media (prefers-color-scheme: dark) {
  .overtrue {
    background-image: none;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
  }
}
</style>
